{% extends "lists/base.html" %}
{% load profile %}
{% load emarkdown %}

{% block title %}
{{ list.title }}
{% endblock %}


{% block breadcrumb %}
<li><a href="{% url "home" %}">Home</a></li>
<li><a href="{% url "lists" %}">Lists</a></li>
{% if owner %}<li class="current">My lists</li>{% else %}
<li class="current">{{ username }}'s lists</li>
{% endif %}
{% endblock %}

{% block content %}
<div class="row">
  <div class="large-12 columns">
    <h1>{{ username }}'s lists{% if owner %} | <a href="{% url "new-list" %}">create a list</a>{% endif %}</h1>
    {% if owner %}
    <div class="panel">
      <h5>
        <span class="label round">{{ upvoted_count }}</span> <a href="{% url "upvoted-list" %}">Links and lists you upvoted</a>
      </h5>
      <p>
        Useful on many occasions.
      </p>
    </div>
    {% endif %}
    {% for list in lists %}
    <div class="panel">
      <h5>
        <span class="label round">{{ list.c }}</span> <a href="{% url "list-single-slug" list.pk list.slug %}">{{ list.title }}</a> {% if owner %}
        <span class="right">
          <a href="{% url "list-edit" list.pk %}" class="lsf i-b"><i class="fi-pencil"></i></a>&nbsp;
          <a href="#" class="lsf i-b trash" data-id="{{ list.pk }}"><i class="fi-trash"></i></a>
        </span>{% endif %}
      </h5>
      <p>
        {{ list.description|emarkdown }}
      </p>
    </div>
    {% endfor %}
  </div>
</div>

<div id="deletemodal" class="reveal-modal">
    <h1>Are you sure ?</h1>
    <p>You are about to delete <strong><a href="#" id="todel">title</a></strong>.</p>
    <a href="#" class="large button" id="close">Take me back</a> &nbsp;
    <a href="#" class="large button alert">I'm sure.</a>
  <a class="close-reveal-modal">&#215;</a>
</div>

{% endblock %}


{% block last_body %}
<script>
  $('.trash').each(function() {
    $(this).on('click', function() {
      var id = $(this).attr('data-id');
      var $list = $($(this).parent().parent().find('a')[0]);
      var title = $list.text();
      var link = $list.attr('href');
      $('#deletemodal > a.alert').attr('data-id', id);
      $('#todel').text(title);
      $('#todel').attr('href', link);
      $('#deletemodal').foundation('reveal', 'open');
    });

    $('#close').on('click', function() {
      $('#deletemodal').foundation('reveal', 'close');
    });

    $('#deletemodal > a.alert').on('click', function() {
      var id = $(this).attr('data-id');
      $.ajax({
        type:"POST",
        url: "/list/delete/"+id,
        data: 'csrfmiddlewaretoken={{csrf_token}}'
      }).done(function(xhr) {
        $('#deletemodal').foundation('reveal', 'close');
        $('.trash[data-id='+id+']').parent().parent().parent().remove();
      });
    });
  });
</script>
{% endblock last_body %}
